<template>
  <div :id="id" style="height: 100%; width: 100%; margin-top: 5px"></div>
</template>

<script>
import * as echarts from 'echarts';

// 协议形式/协议履行情况
export default {
  name: 'ProtocolComponents',
  props: ['id', 'color', 'text', 'value'],
  data() {
    return {
      //
    };
  },
  mounted() {
    let myChart = echarts.init(document.getElementById(this.id));
    let percent = this.value; //百分数
    let option = {
      // backgroundColor: '#081322',
      tooltip: {
        show: false,
        formatter: '{a} <br/>{b} : {c}%'
      },
      title: [
        {
          text: this.text,
          y: '65%',
          x: 'center',
          textStyle: {
            fontSize: 12,
            fontFamily: 'BBT',
            color: this.color
          }
        }
      ],
      series: [
        {
          name: '渐变数据环整个',
          type: 'pie',
          radius: ['60%', '96%'],
          avoidLabelOverlap: false,
          startAngle: 210,
          color: [
            {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(66, 145, 226, 0)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.color // 100% 处的颜色
                }
              ]
            },
            'transparent'
          ],
          hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
          legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: 66,
              name: '1',
              itemStyle: {
                borderWidth: 3,
                borderColor: this.color
              }
            },
            {
              value: 34,
              name: '2',
              itemStyle: {
                borderWidth: 0,
                borderColor: 'transparent'
              }
            }
          ]
        },

        {
          name: '环形百分比',
          type: 'pie',
          radius: ['100%', '100%'],
          avoidLabelOverlap: false,
          startAngle: -30,
          color: ['#091424', 'transparent', 'transparent'],
          hoverAnimation: false,
          legendHoverLink: false,
          clockwise: false, //饼图的扇区是否是顺时针排布。
          itemStyle: {
            show: false,
            normal: {
              borderColor: 'transparent',
              borderWidth: '20'
            },
            emphasis: {
              borderColor: 'transparent',
              borderWidth: '20'
            }
          },
          z: 10,
          label: {
            normal: {
              show: false,
              position: 'center'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: ((10000 - percent) * 240) / 360,
              label: {
                normal: {
                  formatter: percent + '',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '16',
                    fontWeight: 'normal',
                    color: this.color,
                    fontFamily: 'BBT'
                  }
                }
              },
              name: ''
            },
            {
              value: 1,
              name: ''
            },
            {
              value: 100 - ((10000 - percent) * 270) / 360,
              name: ''
            }
          ]
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>
